<!DOCTYPE html>
<html lang="en">
<head>
<title>What is Dark Mode?</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta content="" name="description">
<link href="../css/help.css" media="all" rel="stylesheet" type="text/css" charset="utf-8">
<link href="/library/skin/morpheus-default/tool.css" media="screen" rel="stylesheet" type="text/css" charset="utf-8">
<script src="/library/webjars/jquery/1.12.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/library/js/headscripts.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
    includeWebjarLibrary('featherlight');
    $(document).ready(function(){
      $("a.screensteps-image-zoom").featherlight({
        type: { image:true },
        closeOnClick: 'anywhere'
      }); 
    });   
</script>
</head>
<body>
  <div><div>
<div><h1 class="article-title">What is Dark Mode?</h1></div>
<div>    <div class="step-instructions screensteps-textblock  screensteps-wrapper--introduction screensteps-wrapper">
  <div id="text-content_C0A4D580-D203-0139-FC67-12F2183ABDFB" class="text-block-content">
    <p>Dark Mode or Dark Theme is a setting that allows users to change the overall system color scheme to a light text on a dark background, as opposed to the default dark text on a light background. Benefits of using dark mode include reducing the energy consumption of your device and reducing eye strain when working in low light conditions. </p>
<p>If your device's operating system is set to dark mode, Sakai will automatically enable Dark Mode in the application. </p>
<p>There are two ways you can enable or disable Dark Mode manually: 1) in the Preferences tool, and 2) using the toggle in the user profile drop-down menu. </p>
<p><em>Note: If you don't see one or both of the options below, it means that it has not been enabled in your system.</em> </p>
  </div>
</div>

      <div class="step screensteps-section screensteps-depth-1" id="to-enable-dark-mode-via-preferences">
    <h2 class="step-title screensteps-heading">To enable Dark Mode via Preferences:</h2>
        <div class="step screensteps-section screensteps-depth-2" id="in-your-home-site-select-the-preferences-tool">
    <h3 class="step-title screensteps-heading">In your Home site, select the Preferences tool. </h3>
        <div class="image screensteps-image">
      <a href="https://media.screensteps.com/image_assets/assets/005/157/478/original/147f52c5-e1f1-4fdf-bb27-a90f00175cf3.png" class="screensteps-image-zoom">
        <img src="https://media.screensteps.com/image_assets/assets/005/157/478/medium/147f52c5-e1f1-4fdf-bb27-a90f00175cf3.png" alt="" height="419" width="855">
      </a>
  </div>
 
  </div>
 
        <div class="step screensteps-section screensteps-depth-2" id="in-preferences-select-the-theme-tab">
    <h3 class="step-title screensteps-heading">In Preferences, select the Theme tab. </h3>
        <div class="image screensteps-image">
      <a href="https://media.screensteps.com/image_assets/assets/005/157/480/original/42c215d8-0e7a-46b3-83a6-2bd74c882cbb.png" class="screensteps-image-zoom">
        <img src="https://media.screensteps.com/image_assets/assets/005/157/480/medium/42c215d8-0e7a-46b3-83a6-2bd74c882cbb.png" alt="" height="488" width="855">
      </a>
  </div>
 
  </div>
 
        <div class="step screensteps-section screensteps-depth-2" id="select-the-radio-button-for-dark-theme-and-click-update-preferences">
    <h3 class="step-title screensteps-heading">Select the radio button for Dark Theme and click Update Preferences.</h3>
        <div class="image screensteps-image">
      <a href="https://media.screensteps.com/image_assets/assets/005/157/482/original/8c227fd7-4053-49ba-842a-5f962ff3c8e7.png" class="screensteps-image-zoom">
        <img src="https://media.screensteps.com/image_assets/assets/005/157/482/medium/8c227fd7-4053-49ba-842a-5f962ff3c8e7.png" alt="" height="377" width="855">
      </a>
  </div>
 
  </div>
 
        <div class="step screensteps-section screensteps-depth-2" id="your-screen-will-change-to-display-light-text-on-a-dark-background_1">
    <h3 class="step-title screensteps-heading">Your screen will change to display light text on a dark background.</h3>
        <div class="image screensteps-image">
      <a href="https://media.screensteps.com/image_assets/assets/005/157/484/original/1592f8da-59ce-45ca-b46e-3dd487d9352f.png" class="screensteps-image-zoom">
        <img src="https://media.screensteps.com/image_assets/assets/005/157/484/medium/1592f8da-59ce-45ca-b46e-3dd487d9352f.png" alt="" height="376" width="855">
      </a>
  </div>
 
  </div>
 
  </div>

      <div class="step screensteps-section screensteps-depth-1" id="to-enable-dark-mode-via-the-user-profile-drop-down-menu">
    <h2 class="step-title screensteps-heading">To enable Dark Mode via the user profile drop-down menu:</h2>
        <div class="step screensteps-section screensteps-depth-2" id="to-enable-dark-mode-select-your-profile-icon-and-choose-dark-theme-on">
    <h3 class="step-title screensteps-heading">Select your Profile icon and choose Dark Theme &gt; On.</h3>
        <div class="image screensteps-image">
      <a href="https://media.screensteps.com/image_assets/assets/004/141/920/original/638ff739-cd83-45c7-b04b-5bdb3dbdd3ec.png" class="screensteps-image-zoom">
        <img src="https://media.screensteps.com/image_assets/assets/004/141/920/medium/638ff739-cd83-45c7-b04b-5bdb3dbdd3ec.png" alt="" height="543" width="855">
      </a>
  </div>
 
  </div>
 
        <div class="step screensteps-section screensteps-depth-2" id="your-screen-will-change-to-display-light-text-on-a-dark-background">
    <h3 class="step-title screensteps-heading">Your screen will change to display light text on a dark background.</h3>
        <div class="image screensteps-image">
      <a href="https://media.screensteps.com/image_assets/assets/004/141/922/original/d4ed9941-c211-4405-8c4b-4ec16c4e161d.png" class="screensteps-image-zoom">
        <img src="https://media.screensteps.com/image_assets/assets/004/141/922/medium/d4ed9941-c211-4405-8c4b-4ec16c4e161d.png" alt="" height="551" width="855">
      </a>
  </div>
 
  </div>
 
  </div>


</div>
</div></div>
</body>
</html>
